<!-- 
[ref 对比 reactive]

宏观角度:
1. ref 用来定义: 基本类型数据, 对象类型数据;
2. reactive 用来定义: 对象类型数据

区别:
1. ref 创建的变量必须使用 .value (可以使用 volar 插件自动添加 .value)
2. reactive 重新分配一个新对象, 会失去响应式(可以使用 Object.assign 去整体替换)

使用原则:
1. 若需要一个基本类型的响应式数据, 必须使用 ref;
2. 若需要一个响应式对象, 层级不深, ref, reactive 都可以
3. 若需要一个响应式对象, 且层级较深, 推荐使用 reactive. 表单数据也常用 reactive
-->

<template>
  <div class="person">
    <h2>汽车信息:一辆 {{ car.brand }} 车, 价值 {{ car.price }}万</h2>
    <button @click="changeBrand">修改汽车的品牌</button>
    <button @click="changePrice">修改汽车的价格</button>
    <button @click="changeCar">修改汽车</button>
    <hr>
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { reactive, ref } from 'vue';
  // 数据
  // reactive 包裹原对象后形成响应式对象.
  let car = reactive({
    brand: '奔驰',
    price: 100
  })
  let sum = ref(0)

  // 方法
  function changeBrand() {
    car.brand = '宝马'
  }
  function changePrice() {
    car.price += 10
  }
  function changeCar() {
    // car = {brand: '奥拓', price:1}           // 这么写页面不更新
    // car = reactive({brand: '奥拓', price:1}) // 这么写页面不更新

    // 下面这个写法页面可以更新.
    Object.assign(car, {brand: '奥拓', price:1})

    // .value 必是响应式的
    // car.value = {brand: '奥拓', price:1}
  }
  function changeSum() {
    sum.value += 1
    // sum = ref(9) // 不能越过 .value
  }
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>